<template>
    <div>
        <el-col :span="24" class="toolbar">
            <el-form :inline="true" :model="filters" ref="filters">
                <el-form-item label="创建时间">
                    <el-date-picker v-model="filters.startTime" type="datetime" :picker-options="pickerBeginDateBefore" placeholder="开始时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="至">
                    <el-date-picker v-model="filters.endTime" type="datetime" :picker-options="pickerBeginDateAfter" placeholder="结束时间"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList">查询</el-button>
                    <el-button type="primary" @click="open('ADD')">新增分类</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="dataList">
                <el-table-column label="序号" align="center" type="index" width="65"></el-table-column>
                <el-table-column label="分类名称" align="center" prop="name"></el-table-column>
                <el-table-column label="权重值" align="center" prop="weighNum"></el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormat"></el-table-column>
                <el-table-column label="最后编辑时间" align="center" prop="updateTime" :formatter="dateFormat"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="open('EDITOR',scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="delate(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--工具条-->
            <div class="toolbar" style="display: flex;justify-content: flex-end;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </el-col>
        <el-dialog :title="this.type == 1 ? '新增活动分类' : this.type == 2 ? '编辑' : ''" :visible.sync="dialogWithdrawSet" size="tiny">
            <div v-if="this.type == 1">
                <el-form :model="addForm" ref="addForm" :rules="addFormRule">
                    <el-form-item label="活动分类名称" label-width="110px" prop="classifyName">
                        <el-input placeholder="不超过6个字" v-model="addForm.classifyName" :maxlength="6"></el-input>
                    </el-form-item>
                    <el-form-item label="权重值" label-width="110px" prop="weightValue">
                        <el-input :maxlength="3" placeholder="0~999" v-model="addForm.weightValue"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="this.type == 2">
                <el-form :model="addForm" ref="addForm" :rules="addFormRule">
                    <el-form-item label="活动分类名称" label-width="110px" prop="classifyName">
                        <el-input placeholder="不超过6个字" v-model="addForm.classifyName"></el-input>
                    </el-form-item>
                    <el-form-item label="权重值" label-width="110px" prop="weightValue">
                        <el-input placeholder="0~999" v-model="addForm.weightValue"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save('addForm')">保存</el-button>
                <el-button type="primary" @click="dialogWithdrawSet = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    import { getActivityClassify, addActivityClassify, updateActivityClassify, delateActivityClassify } from '@/api/api'
    export default {
        data() {
	        let validateNumber = (rule, value, callback) => {
		        if (!value) {
			        callback(new Error('不能为空'));
		        } else if(!Number.isInteger(Number(value))) {
			        callback(new Error('输入整数'));
		        } else if(!/^\d{1,2}$/.test(value)) {
			        callback(new Error('输入整数'));
                }else {
			        callback();
		        }
	        };
            return {
	            filters: {
		            startTime: '',
		            endTime: '',
                },
	            pickerBeginDateBefore:{
		            disabledDate: (time) => {
			            let beginDateVal = this.filters.endTime;
			            if (beginDateVal) {
				            return time.getTime() > beginDateVal;
			            }
		            }
	            },
	            pickerBeginDateAfter:{
		            disabledDate: (time) => {
			            let beginDateVal = this.filters.startTime;
			            if (beginDateVal) {
				            return time.getTime() < beginDateVal;
			            }
		            }
	            },
	            dataList: [],
	            total: 0,
	            size: 10,
	            currentPage: 1,
                type: 0,
	            dialogWithdrawSet: false,
                idd: '', // 存储表格行数据id
	            addForm: {
		            classifyName: '',
                    weightValue: '',
                },
	            addFormRule: {
		            classifyName: [
			            { required: true, message: '请输入活动分类名称', trigger: 'blur' },
			            { min: 1, max: 6, message: '长度在 1 到 5 个字符', trigger: 'blur' }
		            ],
	            	weightValue: [
			            { required: true, validator: validateNumber, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
	        dateFormat:function(row, column) {
		        let date = row[column.property];
		        if (date == undefined) {
			        return "";
		        }
		        return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
	        },
        	async getList() {
	        	let para = {
			        pageIndex: this.currentPage,
			        pageSize: this.size,
                }
	        	if(this.filters.startTime != '') {
	        		para.startTime = this.filters.startTime
                }
		        if(this.filters.endTime != '') {
			        para.endTime = this.filters.endTime
		        }
		       
		        getActivityClassify(para).then(res => {
			        this.dataList = res.data.data
                    this.total = res.data.totalCount
                })
            },
            /*
            * 弹窗方法
            * */
            open() {
	            let type = arguments[0]
                if(type == 'ADD') {
	                this.type = 1;
	                this.addForm.classifyName = ''
	                this.addForm.weightValue = ''
	                this.dialogWithdrawSet = true
                } else if(type == 'EDITOR') {
	                this.type = 2;
	                let row = arguments[2]
                    this.idd = row.id
	                this.addForm.classifyName = row.name
	                this.addForm.weightValue = row.weighNum
	                this.dialogWithdrawSet = true
                }
            },
            save(addForm) {
	            this.$refs[addForm].validate((valid) => {
		            if (valid) {
			            if(this.type == 1) {
			            	let para = {
			            		name: this.addForm.classifyName,
					            weighNum: this.addForm.weightValue,
                            }
				            addActivityClassify(para).then(res => {
				            	if(res.data == 1) {
						            this.dialogWithdrawSet = false;
						            this.getList();
						            this.$message({
							            type: 'success',
							            message: '新增成功!'
						            });
                                } else if(res.data == 0) {
						            this.$message({
							            message: '请重新提交，添加失败',
							            type: 'warning'
						            });
                                } else if(res.data == 3) {
						            this.$message({
							            message: '请重新提交，已经存在该权重值',
							            type: 'warning'
						            });
                                }
                            })
                        } else if(this.type == 2) {
				           let para = {
					           name: this.addForm.classifyName,
					           weighNum: this.addForm.weightValue,
                               id: this.idd
                           }
				            updateActivityClassify(para).then(res => {
					            if(res.data == 1) {
						            this.dialogWithdrawSet = false;
						            this.getList();
						            this.$message({
							            type: 'success',
							            message: '编辑成功!'
						            });
					            } else if(res.data == 0) {
						            this.$message({
							            message: '请重新提交，添加失败',
							            type: 'warning'
						            });
					            } else if(res.data == 3) {
						            this.$message({
							            message: '请重新提交，已经存在该权重值',
							            type: 'warning'
						            });
					            }
                            })
                        }
		            } else {
			            console.log('error submit!!');
			            return false;
		            }
	            });
            },
	        delate(index ,row) {
            	let para = {
		            weighNum: row.weighNum
                }
		        delateActivityClassify(para).then(res => {
			        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				        confirmButtonText: '确定',
				        cancelButtonText: '取消',
				        type: 'warning'
			        }).then(() => {
				        this.$message({
					        type: 'success',
					        message: '删除成功!'
				        });
				        this.getList()
			        }).catch(() => {
				       
			        });
                })
            },
	        /*
	        * 分页方法
	        * */
	        handleSizeChange(val) {
		        this.size = val;
		        this.getList();
	        },
	        handleCurrentChange(val) {
		        this.currentPage = val;
		        this.getList();
	        },
        },
	    mounted() {
        	this.getList();
        }
    }
</script>

<style lang='scss' scoped>

</style>
